<%--
  Created by IntelliJ IDEA.
  User: xiaoji
  Date: 2015/1/26
  Time: 9:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="session"/>
<!DOCTYPE html>
<html>
<head>
    <title>设置</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${path}/plugins/jquery-easyui-1.4.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${path}/plugins/jquery-easyui-1.4.1/themes/icon.css">
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<div region="center" style="padding:5px;" border="false">
    <table id="tg" title="任务分类管理" class="easyui-treegrid"
           data-options="
                url: '${path}/plat/view.do',
                rownumbers: true,
                fit:'true',
                pagination: true,
                idField: 'id',
                treeField: 'nameCn',
                toolbar:'#toolbar',
                height:'700px',
                onBeforeLoad: function(row,param){
                    if (!row) {    // load top level rows
                        param.id = 1;    // set id=0, indicate to load new page rows
                    }
                }
            ">
        <thead>
        <tr>
            <th field="nameCn" width="250">分类名称（中）</th>
            <th field="nameEn" width="250" >分类名称（英）</th>
            <th field="skillName" width="150" >技能</th>
            <th field="STATUS" width="150"  formatter="formatDollar">状态</th>
            <th field="sort" width="150"  >排序</th>
        </tr>
        </thead>
    </table>
    <!--菜单按钮-->
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser(1)">添加大类</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser(2)">添加子类</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a>
    </div>
    <script>
        function formatDollar(value){
            if (value == 101001){
                return '可用';
            } else {
                return '不可用';
            }
        }
    </script>
    <div id="dlg" class="easyui-dialog" style="width:500px;height:380px;padding:10px 20px"
         closed="true" buttons="#dlg-buttons">
        <div class="ftitle">分类信息</div>
        <form id="fm" method="post" novalidate>
            <div class="fitem">
                <label>分类名称（中文）:</label>
                <input name="nameCn" class="easyui-textbox" required="true">
            </div>
            <div class="fitem">
                <label>分类名称（英文）:</label>
                <input name="nameEn" class="easyui-textbox" required="true">
            </div>
            <div class="fitem">
                <label>排序:</label>
                <input name="sort" class="easyui-numberbox"  required="true">
            </div>
            <div class="fitem">
                <label>状态:</label>
                <select class="easyui-combobox" name="tasktypeStatus" style="width: 160px" required="true">
                    <option value="101001">激活</option>
                    <option value="101002">停用</option>
                </select>
            </div>
            <div class="fitem">
                <label>技能:</label>
                <div style="margin-left: 150px;">
                    <c:forEach items="${list}" var="l" varStatus="k">
                        <input type="checkbox" style="width: auto" name="skillCheck" value="${l.minorId}"/>${l.skill}
                        <c:if test="${(k.index+1)%2 == 0}">
                            <br/>
                        </c:if>
                    </c:forEach>
                    <input type="hidden" name="skill">
                </div>
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
    </div>
    <script type="text/javascript">
        var url;
        function newUser(type){
            if(type == 1){
                $('#dlg').dialog('open').dialog('setTitle','新建分类');
                $('#fm').form('clear');
                url = '${path}/plat/addType.do?parent='+1;
            }else if(type == 2){
                var row = $('#tg').treegrid('getSelected');
                if(row){
                    $('#dlg').dialog('open').dialog('setTitle','新建分类');
                    $('#fm').form('clear');
                    url = '${path}/plat/addType.do?parent='+row.id;
                }else{
                    $.messager.show({    // 选择父类
                        title: 'Error',
                        msg: '请点击行选择父类'
                    });
                }
            }

        }
        function editUser(){
            var row = $('#tg').treegrid('getSelected');
            console.log(row);
            if (row){
                $('#dlg').dialog('open').dialog('setTitle','编辑分类');
                $('#fm').form('load',row);
                //复选框初始化值
                var arr = row.skill.split(",");
                var checkBoxs=document.getElementsByName("skillCheck") ;
                for (var i=0;i<checkBoxs.length ;i++){
                    var boo = false;
                    for(var j=0;j<arr.length;j++){
                            if(arr[j] == checkBoxs[i].value){
                                boo = true;
                                break;
                            }
                    }

                    if(boo){
                        if(!checkBoxs[i].checked) {
                            console.log(checkBoxs[i].value);
                            checkBoxs[i].checked = true;
                        }
                    }else{
                        if(checkBoxs[i].checked){
                            checkBoxs[i].checked = false;
                        }
                    }
                }
                url = '${path}/plat/editType.do?tasktypeId='+row.id;
            }
        }
        function saveUser(){
            //技能初始化
            var skill = "";
            var len = $("input[type=checkbox][name=skillCheck]:checked").length;
            $("input[type=checkbox][name=skillCheck]:checked").each(function(i){
                skill += $(this).val();
                if(i != (len - 1)){
                    skill+= ",";
                }
            });
            url += '&skill='+skill;

            var sub = $("#fm").form("validate");

            if(!sub){
                return;
            }
            console.log($("#fm").serialize());
            $.ajax({
                type: "POST",
                url: url,
                data:  $("#fm").serialize(),
                success: function(result){

                    console.log(result);

//                    var result = eval('('+result+')');
                    if (result.errormsg != undefined){
                        $.messager.show({
                            title: 'Error',
                            msg: result.errormsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#tg').treegrid('reload');    // reload the user data
                    }
                }
            });


        }
        function destroyUser(){
            var row = $('#tg').datagrid('getSelected');
            if (row){
                $.messager.confirm('提示','你确定删除《'+row.nameCn+'》这个分类么?',function(r){
                    if (r){
                        $.post('${path}/plat/deleteType.do',{tasktypeId:row.id},function(result){
                            if (result.errormsg == undefined){
                                $('#tg').treegrid('reload');    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: result.errormsg
                                });
                            }
                        },'json');
                    }
                });
            }
        }
    </script>
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:150px;
        }
        .fitem input{
            width:160px;
        }
    </style>
</div>
</body>
</html>
